<template>
    <div id="propertylist" style="padding: 18px 18px 0 18px;background-color: #f3f4f7">
        <a-input-search placeholder="请输入房间号/姓名/手机号" enter-button @search="onSearch" size="large" />
        <a-table :data-source="data" :columns="columns" size="middle"
                 :pagination="false" style="margin-top: 18px" :customRow="customRow" rowKey="ownerId">
            <div @click="handleClick" slot="properyName" slot-scope="text">{{ text }}</div>
        </a-table>
    </div>
</template>

<script>
    import {doPost} from "@/utils/requestUtil";
    import infiniteScroll from 'vue-infinite-scroll';
    // const data = [
    //     {
    //         id: 1,
    //         properyName: 'tt',
    //         ownerName: 'dd',
    //         ownerCellphone: '13555'
    //     },
    //     {
    //         id: 2,
    //         properyName: 'tt',
    //         ownerName: 'dd',
    //         ownerCellphone: '13555'
    //     },
    //     {
    //         id: 3,
    //         properyName: 'tt',
    //         ownerName: 'dd',
    //         ownerCellphone: '13555'
    //     },
    //     {
    //         id: 4,
    //         properyName: 'tt',
    //         ownerName: 'dd',
    //         ownerCellphone: '13555'
    //     },
    // ];
    export default {
        inject: ['setTitle', 'setHidden'],
        directives: {infiniteScroll},
        name: 'propertylist',
        data() {
            return {
                data: [],
                loading: false,
                busy: false,
                params: {
                    areaId: this.$route.params.id,
                    parma: '',
                },
                columns: [
                    {
                        title: '房间',
                        dataIndex: 'properyName',
                        scopedSlots: { customRender: 'properyName' },
                    },
                    {
                        title: '姓名',
                        dataIndex: 'ownerName',
                    },
                    {
                        title: '电话',
                        dataIndex: 'ownerCellphone',
                    }
                ]
            }
        },
        beforeMount() {
            this.setTitle(this.$route.query.name);
            this.setHidden(false);
            // this.data = data;
            if (this.$cookies.isKey('userid')) {
                doPost("/prjproperty/api/property/query", this.params).then((res) => {

                    if (res.success) {
                        if (res.data.length > 0) {
                            this.data = res.data;
                        } else {
                            this.$message.error("查不到列表信息。")
                        }
                    }
                }).catch((err) => {
                    console.info(err);
                })
            } else {
                this.$message.error("请在企业微信中打开。");
            }
        },
        methods: {
            customRow(record, index) {
                return {
                    style: {
                        'background-color': index%2 == 0 ? '#ffffff' : '#f8f8f8',
                    },
                    on: {
                        click: event => {
                            console.info(event);
                            this.$router.push("/propertylist/" + this.params.areaId + '/' + record.id + '?name=' + this.$route.query.name);
                        },
                    }
                }
            },
            onSearch(value) {
                this.params.parma = value;
                doPost("/prjproperty/api/property/query", this.params).then((res) => {
                    this.data = res.data;
                }).catch((err) => {
                    console.info(err);
                });
            },
            handleInfiniteOnLoad() {
                const data = this.data;
                this.loading = true;
                if (data.length > 14) {
                    this.busy = true;
                    this.loading = false;
                    return;
                }
                this.loading = false;
            },
            handleClick(e) {
                console.info(e)
                // this.$router.push("/propertylist/" + this.params.areaId + '/' + e + '?name=' + this.$route.query.name);
            }
        }
    }
</script>

<style>
    #propertylist .ant-table-tbody td {
        border-bottom: 0px;
    }
    #propertylist .ant-table-thead {
        font-weight: bold;
        font-size: 11pt;
    }

</style>
